import React ,{useState} from 'react';
import style from "../Register/Register.module.scss";
import {NotificationPlacement} from "antd/lib/notification";
import {notification} from "antd";
import {useNavigate} from "react-router-dom";

//引入请求
import {registerApi} from "../../http/userApi";
//引入md5加密
import md5 from 'js-md5'

//定义弹窗

//定义弹窗失败提示的一些内容
const openNotification = (placement: NotificationPlacement,msg) => {
    notification.info({
        message: msg,
        placement,
        duration: 1,
    });
};
function Register(props) {
    const navigate = useNavigate()
    const userInfo = {
        email:'',
        emailCode:'',
        userpass:'',
        surepass:'',
        state:false
    }
    //设置用户输入的响应式数据
    const [userInput ,setInput] = useState(userInfo)
    //受控组件
    const changeInput = (e) => {
        setInput({
            ...userInput,[e.target.name]:e.target.value
        })
    }
    //同意协议
    const remberHanlder =()=>{
        setInput({
            ...userInput,state:!userInput.state
        })
    }
    //提交
    const submitHanlder =()=>{
        if(userInput.email ==''){
            return openNotification(NotificationPlacement,'请输入邮箱')
        }
        if(userInput.emailCode ==''){
            return openNotification(NotificationPlacement,'请输入邮箱验证码')
        }
        if(userInput.userpass ==''){
            return openNotification(NotificationPlacement,'请输入密码')
        }
        if(userInput.surepass ==''){
            return openNotification(NotificationPlacement,'请确认密码')
        }
        if(!userInput.state){
            return openNotification(NotificationPlacement,'请先同意入驻协议')
        }

        //发起请求
        const {email,emailCode,userpass} = userInput
        registerApi({email,emailCode,userpass:md5(userpass)})
            .then((res)=>{
                console.log(res.data.code)
                if(res.data.code==200){
                    navigate('/enterprise/information')
                }
            })
    }
    return (
        <div>
            <div className={style.header_box}>
                <div className={style.left_box}>
                    <div className={style.left_img}>
                        <img src="https://img2.baidu.com/it/u=4244269751,4000533845&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1658077200&t=a28d40f78e87978de20e20e477c6d8f1" ></img>
                    </div>
                    <div className={style.left_text}  >廖氏美业平台管理系统</div>
                </div>
                <div>
                </div>
            </div>
            <div className={style.main}>
                <div className={style.progress}>
                    <div style={{color:"#c280ff"}}>1 账号信息</div>
                    <div>—————</div>
                    <div>2 企业信息</div>
                    <div>—————</div>
                    <div>3 收款信息</div>
                </div>
                    <div className={style.from}>
                        <div className={style.input_box}>
                            <div className={style.input_view}>
                                <div className={style.input_name}>邮箱</div>
                                <input value={userInput.email} name="email" onChange={(e)=>changeInput(e)}/>
                            </div>
                            <div className={style.input_activation}>激活邮箱</div>
                            {/*<div className={style.alert}><div style={{display:userInput.nameShow?'block':"none"}}>*请输入账号</div></div>*/}
                        </div>
                        <div className={style.input_box}>
                            <div className={style.input_view}>
                                <div className={style.input_name}>邮箱验证码</div>
                                <input name="emailCode"   value={userInput.emailCode}  onChange={(e)=>changeInput(e)}/>
                            </div>

                            {/*<div className={style.alert}><div  style={{display:userInput.passShow?'block':"none"}}>*请输入密码</div></div>*/}
                        </div>
                        <div style={{color:'#aaa',margin:'-20px 0 30px 86px',}}>激活邮箱后将收到验证邮件，请回填邮件中的6位验证码</div>
                        <div className={style.input_box}>
                            <div className={style.input_view}>
                                <div className={style.input_name}>密码</div>
                                <input type="password" value={userInput.userpass} name="userpass" onChange={(e)=>changeInput(e)}/>
                            </div>

                            {/*<div className={style.alert}><div style={{display:userInput.nameShow?'block':"none"}}>*请输入账号</div></div>*/}
                        </div>
                        <div className={style.input_box}>
                            <div className={style.input_view}>
                                <div className={style.input_name}>确认密码</div>
                                <input type="password" name="surepass"   value={userInput.surepass}  onChange={(e)=>changeInput(e)}/>
                            </div>

                            {/*<div className={style.alert}><div  style={{display:userInput.passShow?'block':"none"}}>*请输入密码</div></div>*/}
                        </div>
                            <div className={style.check}  onClick={remberHanlder}>
                                <div className={style.check_box} style={{backgroundColor:userInput.state?'#169bd5':''}} />
                                <div>我同意并遵守</div>
                                <div className={style.context}>《xxxx入驻协议》</div>
                            </div>
                        <div className={style.submit_btn} onClick={submitHanlder}>注册</div>

                    </div>
            </div>

        </div>
    );
}

export default Register;